<template>
  <div id="integral_active">
    <c-title :hide="false" :text="integral ? integral : '积分'"> </c-title>
    <diyBackGround></diyBackGround>
    <div class="main">
      <div class="integral_activity">
        <div class="top">
          <div class="activityTotal">
            <div class="num">{{activity_total}}</div>
            <div class="txt">发布的活动总数</div>
          </div>
          <div class="btn" @click="toIntegralGeneralization">+创建活动</div>
        </div>
        <div class="bottom">
          <div class="contenBox">
            <div class="xtt">{{activity_point}}</div>
            <div class="txt">赠送总数</div>
          </div>
          <div class="contenBox">
            <div class="xtt">{{activity_used}}</div>
            <div class="txt">已领取总数</div>
          </div>
          <div class="contenBox">
            <div class="xtt">{{activity_stock}}</div>
            <div class="txt">已过期总数</div>
          </div>
        </div>
      </div>
      <div class="getRecord">
        <div class="toptxt">
          <div class="left">领取记录</div>
          <div class="right" @click="toUrl('IntegralGetRecord', {})">
            查看全部
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="recordList">
          <div class="lis" v-for="(item,index) in latest_record" :key="index">
            <div class="top">
              <div class="name">{{item.name}}</div>
              <div class="detailNum">+{{item.point}}</div>
            </div>
            <div class="bottom">
              <div class="time">{{item.created_at}}</div>
              <div class="endtime">有效期至{{item.validity_at}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="activityBox">
        <div class="title">
          活动名称
          <div class="bgimg">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fintegral%2Fimage6.png" alt="" />
          </div>
        </div>
        <div class="activityList">
          <div class="lis" v-for="(activity, i) in dataList" :key="i">
            <div class="top">
              <div class="typeName">
                <div class="image">
                  <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fintegral%2Fimage5.png" alt="" />
                </div>
                {{ activity.name }}
              </div>
              <div class="statusBox" @click.stop="toIntegralPresent(activity.id)">
                <div class="image" @click.stop="toIntegralPresent(activity.id)">
                  <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fintegral%2Fimage11.png" alt="">
                </div>
              </div>
            </div>
            <div class="detailBox">
              <div class="list">
                <div class="txt">每人赠送</div>
                <div class="num">{{ activity.average }}</div>
              </div>
              <div class="list">
                <div class="txt">赠送人数</div>
                <div class="num">{{ activity.total }}</div>
              </div>
            </div>
            <div class="activityDetails" @click="toIntegralRecord(activity.id)">
              <div class="left">有效期{{activity.validity_at}}</div>
              <div class="right">活动明细<van-icon name="arrow" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="content" v-if="false">
      <div class="active_box">
        <div class="active">
          <ul class="active_num">
            <li>{{ activity_total }}</li>
            <li>发布活动总数</li>
          </ul>
          <div class="active_btn" @click="toIntegralGeneralization">
            <i class="iconfont icon-life-game-plus"></i>
            <span>创建活动</span>
          </div>
        </div>
        <ul class="integral">
          <li>
            <span>{{ activity_point }}</span>
            <span>赠送总数</span>
          </li>
          <li>
            <span>{{ activity_used }}</span>
            <span>已领取总数</span>
          </li>
          <li>
            <span>{{ activity_stock }}</span>
            <span>已过期总数</span>
          </li>
        </ul>
      </div>
      <div class="integral_box">
        <h1>
          <div class="spare"></div>
          {{ integral ? integral : "积分" }}
        </h1>
        <div class="list" @click="toIntegralRecord(activity.id)" :key="i" v-for="(activity, i) in dataList">
          <div class="active_name">
            <i class="iconfont icon-liwu"></i>
            <span>{{ activity.name }}</span>
            <i @click.stop="toIntegralPresent(activity.id)" class="iconfont icon-share"></i>
          </div>
          <ul class="active_give">
            <li>
              <span>每人赠送</span>
              <span>{{ activity.average }}</span>
            </li>
            <li>
              <span>赠送人数</span>
              <span>{{ activity.total }}</span>
            </li>
          </ul>
          <ul class="detail">
            <li v-show="activity.validity_at">有限期：{{ activity.validity_at }}</li>
            <li v-show="!activity.validity_at"></li>
            <li>
              <span>明细</span>
              <i class="fa fa-angle-right"></i>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import integral_activity_controller from "./integral_activity_controller";

export default integral_activity_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#integral_active {
  .main {
    padding: 0 0.625rem;
    margin-top: -5.125rem;
    padding-bottom: 1rem;

    .activityBox {
      margin-top: 0.5rem;
      background: #fff;
      border-radius: 0.625rem;
      padding: 0.875rem 1.25rem;

      .activityList {
        margin-top: 0.5rem;

        .lis:first-child {
          margin-top: 0;
        }

        .lis {
          margin-top: 1rem;

          .activityDetails {
            margin-top: 0.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #666;
            font-size: 0.75rem;

            .left,
            .right {
              display: flex;
              align-items: center;
            }
          }

          .detailBox {
            display: flex;
            justify-content: space-around;
            margin-top: 1rem;

            .list {
              flex: 1;
              text-align: center;

              .txt {
                margin-bottom: 0.5rem;
              }

              .num {
                font-weight: bold;
                font-size: 1rem;
              }
            }
          }

          .top {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .statusBox {
              font-size: 0.875rem;
              font-weight: 400;
              border-radius: 0.3125rem;
              line-height: 1.25rem;

              .image {
                width: 1rem;
                height: 1rem;

                img {
                  width: 1rem;
                  height: 1rem;
                }
              }
            }

            .typeName {
              display: flex;
              align-items: center;
              font-size: 0.875rem;
              font-weight: bold;
              color: #333;

              .image {
                width: 1.5rem;
                height: 1.5rem;

                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }

      .title {
        position: relative;
        font-size: 1rem;
        font-weight: bold;
        color: #ffc11f;
        text-align: left;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e7e7e7;

        .bgimg {
          position: absolute;
          left: -0.25rem;
          top: -0.25rem;
          width: 1rem;
          height: 1rem;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .getRecord {
      padding: 1rem;
      background: #fff;
      border-radius: 0.625rem;
      margin-top: 0.5rem;
      padding-bottom: 1rem;

      .recordList {
        .lis:last-child {
          margin-bottom: 0;
        }

        .lis {
          margin-bottom: 1.5rem;

          .top {
            display: flex;
            justify-content: space-between;

            .name {
              font-size: 0.875rem;
              color: #333;
              font-weight: bold;
            }

            .detailNum {
              font-weight: bold;
              color: #f20606;
              font-size: 0.875rem;
            }
          }

          .bottom {
            margin-top: 0.5rem;
            font-size: 0.6875rem;
            color: #999;
            display: flex;
            justify-content: space-between;
          }
        }
      }

      .toptxt {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;

        .left {
          font-size: 1rem;
          font-weight: bold;
          color: #333;
        }

        .right {
          display: flex;
          align-items: center;
          font-size: 0.75rem;
          font-weight: 400;
          color: #666;
        }
      }
    }

    .integral_activity {
      background: #fff;
      border-radius: 0.625rem;
      padding: 1rem;

      .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;

        .contenBox {
          display: flex;
          flex-direction: column;
          align-items: center;

          .xtt {
            font-size: 1rem;
            color: #333;
            font-weight: bold;
            text-align: center;
            margin-bottom: 0.5rem;
          }

          .txt {
            font-size: 0.75rem;
            color: #333;
            text-align: center;
          }
        }
      }

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .btn {
          padding: 0.5625rem 1rem;
          border-radius: 0.3125rem;
          background-color: var(--themeBaseColor);
          color: #fff;
        }

        .activityTotal {
          text-align: left;

          .num {
            font-size: 1.5rem;
            color: #333;
            font-weight: bold;
          }

          .txt {
            font-size: 0.75rem;
            font-weight: 400;
            color: #666;
          }
        }
      }
    }
  }

  #content {
    .active_box {
      background-color: #f15353;
      margin-bottom: 0.625rem;
      color: #fff;

      .active {
        padding: 0.875rem;
        display: flex;
        justify-content: space-between;

        .active_num {
          text-align: left;

          li:first-child {
            font-size: 26px;
            font-weight: bold;
          }

          li:last-child {
            font-size: 14px;
          }
        }

        .active_btn {
          margin-top: 0.8125rem;
          background-color: #fff;
          // width: 8.75rem;
          height: 1.625rem;
          padding: 0 0.625rem;
          line-height: 1.625rem;
          border-radius: 0.8125rem;
          color: #666;
          display: flex;
        }
      }

      .integral {
        background: rgba(255, 255, 255, 0.1);
        display: flex;
        padding: 0.625rem 0;

        li {
          width: 33.33%;

          span {
            display: block;
            line-height: 1.5rem;
            font-size: 12px;
          }

          span:first-child {
            font-size: 18px;
          }
        }
      }
    }

    .integral_box {
      h1 {
        background-color: #fff;
        text-align: left;
        height: 2.5rem;
        line-height: 2.5rem;
        padding: 0 0.875rem;
        font-size: 16px;
        font-weight: bold;
        border-bottom: solid 0.0625rem #ebebeb;
        display: flex;

        .spare {
          width: 0.25rem;
          height: 1rem;
          border-radius: 0.0625rem;
          margin-right: 0.375rem;
          background: #f15353;
          margin-top: 0.75rem;
        }
      }

      .list {
        margin-bottom: 0.625rem;
        background: #fff;
        padding: 0.625rem 0;

        .active_name {
          height: 1.875rem;
          line-height: 1.875rem;
          padding: 0 0.875rem;
          display: flex;
          font-size: 14px;

          i:first-child {
            color: #666;
            margin-right: 0.625rem;
            font-size: 1.25rem;
          }

          .icon-share {
            width: 1.875rem;
            position: absolute;
            right: 0.875rem;
            color: #666;
            font-size: 1rem;
          }
        }

        .active_give {
          display: flex;
          padding: 0.625rem 0;

          li {
            width: 50%;
            text-align: center;
            font-size: 12px;

            span {
              display: block;
              line-height: 1.5rem;
            }

            span:last-child {
              font-size: 18px;
            }
          }
        }

        .detail {
          height: 1.875rem;
          line-height: 1.875rem;
          padding: 0 0.875rem;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          color: #8c8c8c;

          li {
            display: flex;

            i {
              font-size: 1.25rem;
              line-height: 1.875rem;
              margin-left: 0.375rem;
            }
          }
        }
      }
    }
  }
}
</style>